<template>
	<view class="index">
		<u-sticky :enable="enableSticky" offset-top="0" h5-nav-height="0"><u-tabs :list="coderTypeList" :current="current" @change="handleTabChange"></u-tabs></u-sticky>
		<view class="list-empty" v-if="list.length == 0"><u-empty text="暂无更多数据" mode="list"></u-empty></view>
		<view class="list-content" v-else>
			<github-item v-for="(item, index) in list" :github="item" v-if="selectedCategory === 'github'" />
			<cnblog-item v-for="(item, index) in list" :blog="item" v-if="selectedCategory === 'cnblogs'" />
			<wanqu-item v-for="(item, index) in list" :blog="item" v-if="selectedCategory === 'wanqu'" />
			<ithome-item v-for="(item, index) in list" :blog="item" v-if="selectedCategory === 'ithome'" />
			<solidot-item v-for="(item, index) in list" :blog="item" v-if="selectedCategory === 'solidot'" />
			<pmcaff-item v-for="(item, index) in list" :blog="item" v-if="selectedCategory === 'pmcaff'" />
			<woshipm-item v-for="(item, index) in list" :blog="item" v-if="selectedCategory === 'woshipm'" />
			<ui-item v-for="(item, index) in list" :blog="item" v-if="selectedCategory === 'ui'" />
		</view>
		<loading-view></loading-view>
	</view>
</template>

<script>
import { coderTypeList, loadingType } from '@/utils/dict.js';
import juejinApi from '@/api/juejin.js';
import { queryListPageFunc } from '@/utils/tools';

export default {
	data() {
		return {
			enableSticky: true,
			coderTypeList,
			current: 0,
			list: [],
			api: null,
			selectedCategory: 'github',
			search: {
				page: 1,
				size: 30,
				status: loadingType.LOADING,
				keywords: ''
			}
		};
	},
	onShow() {
		this.enableSticky = true;
	},
	onHide() {
		this.enableSticky = false;
	},
	onLoad: function() {
		this.handleSearch();
		this.wrapApi();
	},
	onReachBottom: function() {
		this.searchPageList();
	},
	methods: {
		wrapApi() {
			const category = this.coderTypeList[this.current].category;
			if (category === 'github') {
				this.api = juejinApi.resourcesGithub;
			} else if (category === 'cnblogs') {
				this.api = juejinApi.resourcesCnblogs;
			} else if (category === 'wanqu') {
				this.api = juejinApi.resourcesWanqu;
			} else if (category === 'ithome') {
				this.api = juejinApi.resourcesIthome;
			} else if (category === 'solidot') {
				this.api = juejinApi.resourcesSolidot;
			} else if (category === 'pmcaff') {
				this.api = juejinApi.resourcesPmcaff;
			} else if (category === 'woshipm') {
				this.api = juejinApi.resourcesWoshipm;
			} else if (category === 'ui') {
				this.api = juejinApi.resourcesUI;
			}
		},
		handleTabChange(e) {
			this.current = e;
			this.selectedCategory = this.coderTypeList[this.current].category;
			this.wrapApi();
			this.handleRefreshList();
		},
		handleSearch() {
			this.handleRefreshList();
		},
		handleRefreshList() {
			this.search.page = 1;
			this.list = [];
			this.search.status = loadingType.LOADING;
			this.$nextTick(() => {
				this.searchPageList();
			});
		},
		async searchPageList() {
			let { page, size, status, keywords } = this.search;
			const category = this.coderTypeList[this.current].category;
			const param = {
				category: 'trending',
				lang: 'java',
				period: 'day'
			};
			this.$showLoading()
			const res = await queryListPageFunc(this.api, page, size, param, this.list, status);
			this.$hideLoading()
			if (!res) {
				return false;
			}
			this.search.page = res.page;

			let hash = {};
			const dataTemp = res.dataList.reduce((preVal, curVal) => {
				hash[curVal.id] ? '' : (hash[curVal.id] = true && preVal.push(curVal));
				return preVal;
			}, []);

			this.list = dataTemp;
			this.search.status = res.status;
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	.index {
		.list-empty {
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
